<script setup lang="ts">
	// * 地区销售统计图表组件
	import * as echarts from 'echarts'
	import { ref, onMounted, reactive, onUnmounted, watch } from 'vue'
	import { rankApi } from '@api/data'
	import { useTheme } from '@/components/hooks/useTheme'
	const { theme } = useTheme()

	// 容器实例
	const fullRef = ref<HTMLDivElement>()
	// 图表状态数据
	const state = reactive({
		chartsData: [],
		start: 0,
		end: 9
	})

	// echarts实例
	let myEcharts: echarts.ECharts = null
	let timeId = null

	// 监听主题的切换 调用初始化
	watch(theme, () => {
		// 图表销毁
		myEcharts.dispose()
		initCharts()
		getData()
		screenAdapter()
	})

	// * 初始化图表
	const initCharts = () => {
		// 初始化
		myEcharts = echarts.init(fullRef.value, theme.value)
		// 配置
		const option: echarts.EChartsOption = {
			title: { text: '| 地区销售排行', top: 20, left: 20 },
			grid: { top: '40%', left: '3%', bottom: '3%', right: '6%', containLabel: true },
			tooltip: {
				trigger: 'axis',
				axisPointer: { type: 'shadow', z: 1, shadowStyle: { color: '#2D3443' } }
			},
			xAxis: { type: 'category' },
			yAxis: { type: 'value' },
			series: [{ type: 'bar' }]
		}
		// 设置配置
		myEcharts.setOption(option)
		myEcharts.on('mouseover', () => {
			clearInterval(timeId)
		})
		myEcharts.on('mouseout', () => {
			startInterval()
		})
	}

	// * 获取数据
	const getData = async () => {
		const { data } = await rankApi()
		state.chartsData = data
		// 进行降序排序
		state.chartsData.sort((a, b) => b.value - a.value)
		console.log(state.chartsData)
		// 更新配置
		updateCharts()
		// 开启平移动画
		startInterval()
	}

	// * 更新配置项
	const updateCharts = () => {
		// 渐变色
		const colorArr = [
			['#0BA82C', '#4FF778'],
			['#2E72BF', '#23E5E5'],
			['#5052EE', '#AB6EE5']
		]
		// 处理数据
		const names = state.chartsData.map(item => item.name)
		const values = state.chartsData.map(item => item.value)
		// 配置项
		const updateOption: echarts.EChartsOption = {
			xAxis: { data: names },
			series: [
				{
					data: values,
					itemStyle: {
						color: arg => {
							let color = []
							if (arg.value >= 300) {
								color = colorArr[0]
							} else if (arg.value >= 200) {
								color = colorArr[1]
							} else {
								color = colorArr[2]
							}
							return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
								{ offset: 0, color: color[0] },
								{ offset: 1, color: color[1] }
							])
						}
					}
				}
			],
			dataZoom: {
				show: false,
				startValue: state.start,
				endValue: state.end
			}
		}
		// 设置配置项
		myEcharts.setOption(updateOption)
	}

	// * 分辨率适配
	const screenAdapter = () => {
		const size = (fullRef.value.offsetWidth / 100) * 3.25
		// 设置配置
		const adapterOption: echarts.EChartsOption = {
			title: { textStyle: { fontSize: size } },
			series: [{ barWidth: size * 1.1, itemStyle: { borderRadius: [size / 2, size / 2, 0, 0] } }]
		}
		// 更新配置
		myEcharts.setOption(adapterOption)
		myEcharts.resize()
	}

	// * 平移动画开启
	const startInterval = () => {
		if (timeId) clearInterval(timeId)
		timeId = setInterval(() => {
			state.start++
			state.end++
			if (state.end > state.chartsData.length - 1) {
				state.start = 0
				state.end = 9
			}
			updateCharts()
		}, 1000)
	}

	// 实例挂载后（渲染后）
	onMounted(() => {
		initCharts()
		getData()
		window.addEventListener('resize', screenAdapter)
		screenAdapter()
	})

	// 实例销毁后
	onUnmounted(() => {
		window.removeEventListener('resize', screenAdapter)
		clearInterval(timeId)
	})

	defineExpose({ resize: screenAdapter })
</script>

<template>
	<div class="full_container" ref="fullRef"></div>
</template>

<style scoped lang="scss"></style>
